<template>
    <div class="home">
        <!-- 头 -->
        <van-nav-bar title="标题" left-text="返回" left-arrow @click-left="onClickLeft" />
        <!-- 头 -->

        <!-- 轮播 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item><img src="@/assets/imgs/swiper1.jpg" alt=""></van-swipe-item>
            <van-swipe-item><img src="@/assets/imgs/swiper1.jpg" alt=""></van-swipe-item>
            <van-swipe-item><img src="@/assets/imgs/swiper1.jpg" alt=""></van-swipe-item>
            <van-swipe-item><img src="@/assets/imgs/swiper1.jpg" alt=""></van-swipe-item>
        </van-swipe>

        <!-- 轮播 -->

        <!-- main -->
        <div class="main">
            <ul>
                <li>
                    <van-swipe-cell>
                        <van-card num="1" price="192" desc="木村耀司" title="登山旅行大学生户外双肩背包情侣外带小背包" class="goods-card"
                            thumb="https://img01.yzcdn.cn/vant/cat.jpeg" />
                        <template #right>
                            <van-button square text="删除" type="danger" class="delete-button" />
                        </template>
                    </van-swipe-cell>
                </li>
                <li>
                    <van-swipe-cell>
                        <van-card num="1" price="192" desc="木村耀司" title="登山旅行大学生户外双肩背包情侣外带小背包" class="goods-card"
                            thumb="https://img01.yzcdn.cn/vant/cat.jpeg" />
                        <template #right>
                            <van-button square text="删除" type="danger" class="delete-button" />
                        </template>
                    </van-swipe-cell>
                </li>
                <li>
                    <van-swipe-cell>
                        <van-card num="1" price="192" desc="木村耀司" title="登山旅行大学生户外双肩背包情侣外带小背包" class="goods-card"
                            thumb="https://img01.yzcdn.cn/vant/cat.jpeg" />
                        <template #right>
                            <van-button square text="删除" type="danger" class="delete-button" />
                        </template>
                    </van-swipe-cell>
                </li>
            </ul>
        </div>
        <!-- main -->

        <!-- 底部 -->
        <van-tabbar v-model="active">
            <van-tabbar-item>
                <van-button type="default">
                    <van-icon name="cart-o" size="30" />

                </van-button>
            </van-tabbar-item>
            <van-tabbar-item>
                <van-button color="#ffa500">前往商城</van-button>
            </van-tabbar-item>
            <van-tabbar-item>
                <van-button color="#00aaef">加入购物车</van-button>
            </van-tabbar-item>
            <van-tabbar-item>
                <van-button color="#69c3aa">前往付款</van-button>
            </van-tabbar-item>
        </van-tabbar>
        <!-- 底部 -->

    </div>

</template>
<script>
import Vue from 'vue';
import { Swipe, SwipeItem, NavBar, Tabbar, TabbarItem, Button, Icon, Card, SwipeCell } from 'vant';
import { Toast } from 'vant';

Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(NavBar);
Vue.use(Tabbar);
Vue.use(TabbarItem);
Vue.use(Button);
Vue.use(Icon);
Vue.use(Card);
Vue.use(SwipeCell);
export default {
    data () {
        return {
            active: 0,
        };
    },
    methods: {
        onClickLeft () {
            Toast('返回');
        },

    }
}
</script>

<style lang="scss" seoped>
@import "@/assets/css/common.scss";

.home {
    width: 100%;
    height: 100%;
    background: #ccc;
    display: flex;

    flex-direction: column;

    .van-nav-bar {
        height: px2rem(60);
        background-color: #69c3aa;
        color: #fff;
        .van-nav-bar__content {
            height: 100%;
            .van-ellipsis {
                color: #fff;
                line-height: 100%;
            }
            .van-icon-arrow-left {
                color: #fff;
            }
            .van-nav-bar__text {
                color: #fff;
            }
        }
    }

    ::v-deep .van-swipe {
        height: px2rem(150);

        .van-swipe-item {
            color: #fff;
            font-size: px2rem(20);
            line-height: px2rem(150);
            text-align: center;
            background-color: #39a9ed;
            height: 100%;
            img {
                height: 100%;
                width: 100%;
            }
        }
    }
    .main {
        flex: 1;
        overflow-y: auto;

        ul {
            display: flex;
            flex-wrap: wrap;

            height: 100%;

            li {
                width: 100%;
                height: px2rem(150);
                background: #fff;
                margin-bottom: px2rem(10);
            }
        }
    }
    .van-hairline--top-bottom {
        width: 100%;
        height: px2rem(70);
        .van-tabbar-item {
            width: 100%;
            height: 100%;
            .van-tabbar-item__text {
                height: 100%;
                width: 100%;
                .van-button {
                    height: 100%;
                    width: 100%;
                }
            }
        }
    }
}
</style>
